<script>
export default {
    props: ['modelValue', "isAdd"],
    emits: ['update:modelValue', "user-save"],
    computed: {
        user: {
            get() {
                return this.modelValue
            },
            set(value) {
                this.$emit('update:modelValue', value)
            }
        }
    }
}
</script>

<template>
    <div class="user-form">
        <div>
            <label for="username">用户名</label>
            <input type="text" id="username" v-model="user.username" :disabled="!isAdd">
        </div>
        <div>
            <label for="nickname">昵称</label>
            <input type="text" id="nickname" v-model="user.nickname">
        </div>
        <div>
            <label for="truename">姓名</label>
            <input type="text" id="truename" v-model="user.truename">
        </div>
        <div>
            <label for="avatar">头像</label>
            <input type="text" id="avatar" v-model="user.avatar">
        </div>
        <div>
            <label for="role">角色</label>
            <select id="role" v-model="user.role">
                <option disabled value="">选择角色</option>
                <option :value="1">管理员</option>
                <option :value="2">普通用户</option>
            </select>
        </div>
        <div>
            <button @click="$emit('user-save')">提交</button>
        </div>
    </div>
</template>

<style scoped>
.user-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.user-form>div {
    flex: 1 1 auto;
    margin: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

label {
    display: inline-block;
    width: 80px;
}

textarea,
input {
    flex: auto;
}

button {
    margin-left: 80px;
}
</style>